<style>
</style>

<template>
  <div class="search-form-con">
    <Row type="flex" justify="space-between" style="margin-bottom: 24px;">
      <Col :span="2">
        <Button icon="plus" type="primary" @click="addProjectsTypeModal.show = true">添加项目类型</Button>
      </Col>
      <Form :model="form" inline>
        <FormItem>
          <Input v-model="form.word" placeholder="请输入关键字" />
        </FormItem>
      </Form>
    </Row>




    <!-- 添加项目类型 -->
    <Modal v-model="addProjectsTypeModal.show" width="400" :mask-closable="false">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>添加项目类型</span>
      </p>

      <div>
        <Form :model="addProjectsTypeModal.form" label-position="top">
          <FormItem label="* 项目类型名称">
            <Input v-model="addProjectsTypeModal.form.name" placeholder="请输入项目类型名称"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="addProjectsTypeModal.loading" @click="handleAddType(addProjectsTypeModal.form)"
                long>
          <span v-if="!addProjectsTypeModal.loading">添加项目类型</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'ProjectsTypeViewHeadTool',
    data() {
      return {
        form: {
          mode: 1,
          word: ''
        },
        // 添加项目类型模态框
        addProjectsTypeModal: {
          show: false,
          form: {
            name: '',
            type: 1
          },
          loading: false
        }
      }
    },
    watch: {
      'form.word': function (curr) {
        this.$emit('on-search-type', this.form)
      },
    },
    methods: {
      handleAddType(form) {
        this.addProjectsTypeModal.loading = true;
        this.$emit('on-add-type', form, (status) => {
          if (status) {
            this.addProjectsTypeModal.show = false
            Object.assign(this.$data.addProjectsTypeModal.form, this.$options.data().addProjectsTypeModal.form)
          }
          this.addProjectsTypeModal.loading = false;
        });
      }
    }
  }
</script>
